<template>
    <div class="projects-container">
        <div class="right-content">
            <div class="content-header">
                <div class="filter-group">
                    <el-button :class="{ 'active-filter': activeFilter === '0' }"
                        @click="getActivitiesByState('all')">全部</el-button>
                    <el-button :class="{ 'active-filter': activeFilter === '1' }"
                        @click="getActivitiesByState('notStarted')">未开始</el-button>
                    <el-button :class="{ 'active-filter': activeFilter === '2' }"
                        @click="getActivitiesByState('running')">进行中</el-button>
                    <el-button :class="{ 'active-filter': activeFilter === '3' }"
                        @click="getActivitiesByState('over')">已结束</el-button>
                </div>
                <div class="action-group">
                    <el-button type="primary" :class="['recycle-btn', { 'active-filter': recycleVisiable }]"
                        @click="showRecycle">
                        <el-icon>
                            <Connection />
                        </el-icon>
                        活动回收站
                    </el-button>
                    <el-input v-model="activitySearchModel" style="max-width: 600px" placeholder="搜索活动"
                        class="input-with-select" @keyup.enter.native="handleSearch" clearable>
                        <!-- <template #prepend>
                            <el-select v-model="activitySearchType" placeholder="请选择" style="width: 115px"
                                @change="searchTypeSelected">
                                <el-option v-for="item in activitySearchTypeOptions" :key="item.value"
                                    :label="item.label" :value="item.value" selected="item.value===1" />
                            </el-select>
                        </template> -->
                        <template #append>
                            <el-button @click="handleSearch">
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                    <el-button type="primary" class="create-activity" @click="createDialogVisiable = true">+
                        创建活动</el-button>
                </div>
            </div>
            <div class="content-body">
                <template v-if="activities?.length">
                    <el-row v-loading="loading" :gutter="projectGutter" v-for="item in activities" :key="item.id"
                        class="data-item">
                        <el-col :span="8">
                            <el-card shadow="never" class="no-border-card">
                                <div class="card-content">
                                    <div class="image-container">
                                        <img src="@/assets/icon.png" />
                                        <el-button type="primary">修改</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="16">
                            <el-row class="row-bottom-border">
                                <el-col :span="16">
                                    <el-card shadow="never" class="no-border-card">
                                        <div class="card-content">
                                            <h3>{{ item.name }}</h3>
                                            <p>活动编号：{{ item.serial }}</p>
                                            <p>创建时间：{{ formatDateTimeToDate(item.created_at) }}</p>
                                            <p>活动时间：{{ formatDateTimeToDate(item.activity_time) }} — {{
                                                formatDateTimeToDate(item.activity_end) }}</p>
                                            <p>签到数量：{{ item.sign_amount }}</p>
                                            <p>{{ item.intro }}</p>
                                        </div>
                                    </el-card>
                                </el-col>
                                <el-col :span="8">
                                    <el-button type="primary" plain icon="ArrowRight" class="client-entry"
                                        @click="showClientQRcode(item.id)">
                                        <el-icon>
                                            <Connection />
                                        </el-icon>
                                        用户端入口
                                    </el-button>
                                </el-col>
                            </el-row>
                            <div class="do-actions">
                                <el-button @click="handleButtonClick('settings', item.id)">
                                    <el-icon>
                                        <Setting />
                                    </el-icon>
                                    活动设置
                                </el-button>
                                <el-button @click="handleButtonClick('screen', item.id)">
                                    <el-icon>
                                        <Monitor />
                                    </el-icon>
                                    大屏设置
                                </el-button>
                                <el-button @click="handleButtonClick('client', item.id)">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                    用户端设置
                                </el-button>
                                <el-button @click="handleButtonClick('data', item.id)">
                                    <el-icon>
                                        <DataAnalysis />
                                    </el-icon>
                                    活动数据
                                </el-button>
                                <el-button @click="handleButtonClick('fullscreen', item.id)">
                                    <el-icon>
                                        <FullScreen />
                                    </el-icon>
                                    进入大屏幕
                                </el-button>
                                <el-button @click="handleButtonClick('delete', item.id)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    <span style="color:#bbc">删除活动</span>
                                </el-button>
                            </div>
                        </el-col>
                    </el-row>
                </template>
                <el-empty v-else description="No data" class="empty-container" />
            </div>
        </div>

        <!-- 删除确认对话框 -->
        <el-dialog v-model="deleteConfirmVisiable" title="Tips" width="500" :before-close="handleCloseDelConfirm">
            <span>确认要删除活动{{ currentActivity.name ? '【' + currentActivity.name + '】' : '' }}吗？</span>
            <span v-if="recycleVisiable" class="remove-warnning">活动数据不可恢复！！</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="deleteConfirmVisiable = false"> 取消 </el-button>
                    <el-button type="primary" @click="deleteCurrentActivity(currentActivity.id)"> 确认 </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 客户端二维码 -->
        <el-dialog v-model="clientQRcodeVisiable" title="客户端入口" width="800" :before-close="handleCloseQRConfirm">
            <span class="qrcode-container">
                <el-form class="qrshow-form">
                    <!-- 活动名称 -->
                    <el-form-item label="" prop="" width="770">
                        <el-input v-model="clientUrl" width="770" disabled>
                            <template #append>
                                <el-button @click="copyClientQrcode">
                                    <el-icon>
                                        <CopyDocument />
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="">
                        <QrCodeGenerator ref="qrGeneratorRef" :text="clientUrl" :visible="showQRCode" />
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="clientQRcodeVisiable = false"> 关闭 </el-button>
                    <el-button type="primary" @click="copyClientQrcode"> 复制链接 </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 添加对话框 -->
        <el-dialog v-model="createDialogVisiable" title="创建活动" width="500" :before-close="handleCloseCreateDialog">
            <el-form :model="createingActivity" label-width="100px">
                <!-- 活动名称 -->
                <el-form-item label="活动名称" prop="name" required>
                    <el-input v-model="createingActivity.name" placeholder="请输入活动名称" clearable />
                </el-form-item>

                <!-- 活动编号 -->
                <el-form-item label="活动编号" prop="serial">
                    <el-input v-model="createingActivity.serial" placeholder="自动生成可不填" clearable />
                </el-form-item>

                <!-- 活动时间 -->
                <el-form-item label="开始时间" prop="activity_time" required>
                    <el-date-picker v-model="createingActivity.activity_time" type="datetime" placeholder="选择活动开始时间"
                        value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledStartDate"
                        @change="handleStartTimeChange" />
                </el-form-item>

                <el-form-item label="结束时间" prop="activity_end" required>
                    <el-date-picker v-model="createingActivity.activity_end" type="datetime" placeholder="选择活动结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledEndDate"
                        :disabled-time="disabledEndTime" />
                </el-form-item>

                <!-- 活动描述 -->
                <el-form-item label="活动描述" prop="intro">
                    <el-input v-model="createingActivity.intro" type="textarea" :rows="3" placeholder="请输入活动描述" />
                </el-form-item>

                <!-- 隐藏字段（默认值） -->
                <input type="hidden" v-model="createingActivity.sign_amount" />
                <input type="hidden" v-model="createingActivity.is_deleted" />
                <input type="hidden" v-model="createingActivity.state" />
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="createDialogVisiable = false">取消</el-button>
                    <el-button type="primary" @click="createActivity">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script src="@/scripts/desktop/projectsList.js"></script>
<style scoped src="@/styles/desktop/ProjectsList.css"></style>
